<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            /*首层背景层*/
            height: 2000px;
            background-color: grey;
            font-size: 1000%;
            color: black;
        }
        .mask{
            /*第二层，遮罩层*/
            background-color: black;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 0.7;

            z-index: 999;
        }
        .dialog{
            /*第三层，固定层*/
            /*钉住作用*/
            position: fixed;
            width: 300px;
            height: 300px;
            /*border: 1px solid red;*/
            background-color: white;

            /*钉住的位置*/
            left: 0;
            right: 0;
            top: 200px;
            margin:0 auto;

            /*比较谁在上一层，z-index大就在上面*/
            z-index: 1000;
        }

    </style>
</head>
<body>


<div class="c1">张三李四a威威而退的风格和健康现场v不那么法国户籍科吃饭v搞不好你家门口统一规划
    张三李四a威威而退的风格和健康现场v不那么法国户籍科吃饭v搞不好你家门口统一规划
</div>
<div class="mask"></div>
<div class="dialog">
    <input type="text">account
    <input type="password">password
    <input type="submit">
</div>
</body>
</html>